<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-jQuery-安装和使用</title>
  <!-- 
  jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，旨在简化 HTML 文档的遍历和操作、事件处理、动画以及 Ajax 交互。
  一、安装 jQuery
  1. 使用 CDN 引入

  最简单的方式是通过 Content Delivery Network (CDN) 引入 jQuery。可以在 HTML 文件的  `<head>`  部分或  `<body>`  结束标签之前添加以下代码：
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>使用 jQuery</title>
    
  2. 下载 jQuery

  你也可以从 jQuery 的官方网站下载 jQuery 文件，并将其放置在项目目录中，然后在 HTML 文件中引入：
  <script src="path/to/your/jquery.min.js"></script>
  二、基本使用

  1. jQuery 选择器

  jQuery 提供了强大的选择器，可以轻松选择 DOM 元素：
  $(document).ready(function() {
      // 选择所有段落并设置文本
      $('p').text('Hello, jQuery!');
  });
  2. 事件处理

  jQuery 简化了事件处理的过程：
  $(document).ready(function() {
      $('#myButton').click(function() {
          alert('按钮被点击了！');
      });
  });
  3. DOM 操作

  可以使用 jQuery 轻松地操作 DOM 元素：
  $(document).ready(function() {
      // 添加一个新的段落
      $('body').append('<p>这是一个新段落。</p>');
      
      // 隐藏一个元素
      $('#myDiv').hide();
      
      // 显示一个元素
      $('#myDiv').show();
  });
  4. Ajax 请求

  jQuery 使 Ajax 请求变得简单：
  $(document).ready(function() {
      $('#loadData').click(function() {
          $.ajax({
              url: 'data.json',
              method: 'GET',
              dataType: 'json',
              success: function(data) {
                  console.log(data);
              },
              error: function(xhr, status, error) {
                  console.error('请求失败:', error);
              }
          });
      });
  });
  5. 动画效果

  jQuery 提供了简单的动画效果：
  $(document).ready(function() {
      $('#fadeOutButton').click(function() {
          $('#myDiv').fadeOut();
      });
      
      $('#fadeInButton').click(function() {
          $('#myDiv').fadeIn();
      });
  });
  三、总结

  - 安装 jQuery：可以通过 CDN 或下载文件的方式引入 jQuery。
  - 使用 jQuery：使用  `$`  符号来访问 jQuery 的功能，常用的方法包括选择器、事件处理、DOM 操作、Ajax 请求和动画效果。
  - 简化开发：jQuery 使得 JavaScript 的 DOM 操作和事件处理更加简洁和易于理解，适合快速开发。

  通过合理使用 jQuery，可以大大提高前端开发的效率和代码的可读性。虽然现代浏览器的原生 JavaScript 已经有了很多改进，但 jQuery 仍然是许多项目中不可或缺的工具。
    -->
</head>
<body>

   <!-- 
    integrity: 防止资源被篡改,如果浏览器发现资源被篡改 就不会加载该资源
    crossorigin: 加载不同源的资源时,浏览器是否需要携带用户凭证信息( cookie, ssl 证书 等 )
      anonymous: 不需要携带用户凭证信息
      user-credentail: 需要携带用户凭证信息
   -->
  <!-- <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> -->

   <!-- 
    1.使用CDN的方式引入
    执行下面的js文件
      1.window.jQuery 函数 -> 工厂函数
      2.window.$ 函数
   -->
   <!-- <script src="https://code.jquery.com/jquery-3.6.0.js"></script> -->
   <script src="../libs/jquery-3.6.0.js"></script>
   <script>
    console.log("%O", $);
    console.log($ === jQuery);

    // 需求:在页面上显示 Hello jQuery
    // document.body.textContent = "Hello jQuery";

    $('body').text('Hello jQuery');

   </script>
  
</body>
</html>

